<script setup lang="ts">
import { OrderType } from "@/enums";
import { getStatusText } from "@/utils/filter";
defineProps<{
  status?: OrderType;
  countdown?: number;
}>();
</script>

<template>
  <div class="room-status-page" v-if="status && countdown">
    <!-- 咨询中 -->
    <div class="head" v-if="status === 3">
      <p :class="{ green: status === 3 }">{{ getStatusText(status) }}</p>
      <p>
        剩余时间：<van-count-down v-if="countdown" :time="countdown * 1000" />
      </p>
    </div>
    <!-- 已完成 -->
    <div class="head" v-if="status === 5||status === 4">
      <div><van-icon name="passed" />已结束</div>
    </div>
    <!-- 待接诊 -->
    <div class="head" v-if="status === 2" :class="{ bgGreen: status === 2 }">
      <div>已通知医生尽快接诊，24小时内医生未回复将自动退款</div>
    </div>
  </div>
  <van-skeleton v-else>
    <template #template>
      <div
        :style="{
          display: 'flex',
          width: '100%',
          justifyContent: 'space-between',
        }"
      >
        <van-skeleton-paragraph row-width="40%" style="margin-top: 15px" />
        <van-skeleton-paragraph row-width="40%" style="margin-top: 15px" />
      </div>
    </template>
  </van-skeleton>
</template>

<style lang="scss" scoped>
.green {
  color: var(--cp-primary);
}
.bgGreen {
  color: var(--cp-primary);
  background-color: #eaf8f6 !important;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  height: 40px;
  padding: 0 10px;
  p:nth-child(2) {
    display: flex;
    align-items: center;
  }
}
</style>
